<template>
	<div id="task_detail">
		<p class="Title">试用信息</p>
		<div class="detail_1">
			<div class="detail_1_l">
				<div>
					<p class="key">店铺名称：</p>
					<p class="value">{{storeName}}</p>
				</div>
				<div>
					<p class="key">活动名称：</p>
					<p class="value">
						<img v-if="platform == 1" src="../../static/img/tb.png"/>
						<img v-else-if="platform == 2" src="../../static/img/tm.png"/>
						<img v-else-if="platform == 3" src="../../static/img/jd.png"/>
						{{activityName}}
					</p>
				</div>
				<div>
					<p class="key">商品价值：</p>
					<p class="value">
						{{taskPrice}}元
					</p>
				</div>
				<div>
					<p class="key">拍卖封顶价：</p>
					<p class="value">
						{{taskPrice * 0.5}}元
					</p>
				</div>
				<div>
					<p class="key">起拍价：</p>
					<p class="value">
						{{startPrice}}元
					</p>
				</div>
				<div>
					<p class="key">活动ID：</p>
					<p class="value">{{taskId}}</p>
				</div>
				<div>
					<p class="key">开始时间：</p>
					<p class="value">{{getDate(startTime)}}</p>
				</div>
			</div>
			<div class="detail_1_r">
				<div class="schedule">
					<p>拍卖进度：</p>
					<p>提供<span>{{taskNum}}</span>份拍卖品 /已成功拍出申请<span>{{successNum}}</span>件 / 剩余未拍出<span>{{taskNum - successNum}}</span>件</p>
				</div>
				<div class="schedule">
					<p>参与竞拍人数：<span>{{userNum}}</span>人</p>
					<p style="margin-left: 20px;">最高出价：<span>{{maxPrice}}</span>元</p>
				</div>
				<div class="task_data">
					<div class="data_title">
						<p>商品名称</p>
						<p>数量/件</p>
						<p>规格</p>
						<p>运费</p>
					</div>
					<div class="data_content">
						<p>{{activityName}}</p>
						<p>{{taskNum}}</p>
						<p>{{size}}</p>
						<p>{{postage}}</p>
					</div>
				</div>
				<div class="task_search">
					<p>用户名：</p>
					<input type="text" v-model="userName" />
					<p>订单号：</p>
					<input type="text" v-model="orderNum" />
					<input type="button" value="搜索" @click="search">
				</div>
			</div>
		</div>
	  	<router-view/>
	</div>
</template>

<script>
export default{
	name:'taskDetailAuction',
	data:function(){
		return{
			taskId:'',//活动Id
			storeName: '',//店铺名称
			platform: 1,//平台
			activityName: '',//活动名称
			startPrice: 0,//起拍价
			startTime: '',//开始时间
			taskNum: 0,//任务单数
			userNum: 0,//用户申请数(参拍人数)
			successNum: 0,//成功下单数
			taskPrice: 0,//下单价
			maxPrice: 0,//目前最高价
			startPrice: 0,//起拍价
//			allPeople: 0,//参拍人数
			size: '',//规格
			postage: '包邮',//运费
			toDetail: 1,//显示用户列表还是详情
			userName:'',//（搜索）用户名
			orderNum:'',//（搜索）订单号
		}
	},
	methods:{
		
		showBasicDetail:function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				id: _this.taskId
	        })
			_this.$axios.post('/agent/auctionTask/basicDetail',postData).then(function(res){
				var task = res.data.result.task;
				var maxPrice = res.data.result.maxPrice;
				_this.storeName = task.houseName;
				_this.platform = task.paltform;
				_this.startTime = task.releasetime;
				_this.taskNum = task.releaseNum;
				_this.userNum = task.applyNum;
				_this.successNum = task.releaseNum-task.surplusNum;
				_this.activityName = task.taskName;
				_this.taskPrice = task.price;
				_this.size = task.goodsNotice;
				_this.startPrice = task.startPrice;
				_this.userNum = task.applyNum;
				_this.maxPrice = maxPrice;
				
			}).catch(function (error) {
			    console.log(error);
			});
		},
		search: function(){
			this.$router.push({path:'/agent/detailAuction/userListAuction?taskId='+this.taskId+'&userName='+this.userName+'&orderNum='+this.orderNum})
		},
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		}
	},
	created:function(){
		this.taskId = this.$route.query.taskId;
		this.showBasicDetail();
	},
}
</script>

<style>
</style>

<style scoped>
#task_detail{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
.detail_1{
	display: flex;
	align-items: center;
	border-top: 1px solid #E6E6E6;
	border-bottom: 1px solid #E6E6E6;
	padding: 10px 30px;
	box-sizing: border-box;
	margin-top: 15px;
}
.detail_1_l{
	width: 30%;
	padding-right: 20px;
	box-sizing: border-box;
}
.detail_1_l>div{
	display: flex;
	margin-bottom: 10px;
}
.detail_1_l>div:last-child{
	margin-bottom: 0;
}
.detail_1_l .key{
	width: 72px;
	white-space: nowrap;
	color: #545454;
}
.detail_1_l .value{
	color: #808080;
}
.detail_1_l .value img{
	height: 16px;
	display: inline-block;
	vertical-align: middle;
}
.detail_1_r{
	width: 70%;
	padding: 15px;
	border-left: 1px solid #E6E6E6;
	box-sizing: border-box;
}
.detail_1_r .schedule:first-child{
	margin-bottom: 10px;
}
.schedule{
	display: flex;
}
.schedule p:first-child{
	color: #545454;
	margin-right: 3px;
}
.schedule p:last-child{
	color: #808080;
}
.schedule p span{
	color: #FF464E;
}
.task_data{
	margin-top: 15px;
}
.data_title{
	display: flex;
	color: #545454;
	padding: 10px 0;
	background-color: #F5F5F5;
}
.data_title p:nth-child(1){
	width: 45%;
	text-align: center;
}
.data_title p:nth-child(2),
.data_title p:nth-child(3),
.data_title p:nth-child(5){
	width: 15%;
	text-align: center;
}
.data_title p:nth-child(4){
	width: 25%;
	text-align: center;
}
.data_content{
	color: #808080;
	display: flex;
	padding: 10px 0;
	border-bottom: 1px solid #E6E6E6;
}
.data_content p:nth-child(1){
	width: 45%;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.data_content p:nth-child(2),
.data_content p:nth-child(3),
.data_content p:nth-child(5){
	width: 15%;
	text-align: center;
}
.data_content p:nth-child(4){
	width: 25%;
	text-align: center;
}
/*--------搜索----------*/
.task_search{
	display: flex;
	align-items: center;
	margin-top: 15px;
}
.task_search p{
	color: #545454;
}
.task_search input[type='text']{
	width: 187px;
	height: 30px;
	border: 1px solid #E6E6E6;
	padding-left: 10px;
	box-sizing: border-box;
	margin-right: 10px;
}
.task_search input[type='button']{
	background-color: #FF464E;
	color: #FFFFFF;
	height: 30px;
	width: 100px;
	border: none;
}
</style>